<template>
	<view>
		<wrapBgImgVue
			bgImg="goods/goods_top.png"
		/>
		
		<navigationBarVue
			:bgImgType="1"
			navigationTitle="菜品管理"
			@onTotalHeight="onTotalHeight"
		>
			<view class="wrap-status-bg flex">
				<block v-for="(item, index) in tab_list" :key="index">
					<view class="status-item flex align-center just-center"
						:class="item.type === status ? 'active': ''"
						@click.stop="onTab(item)"
					>
						{{ item.title }}
						
						<image
							class="tab-line"
							v-if="item.type === status"
							:src="$staticImagePath('goods/tab_lines.png')"
						/>
					</view>
				</block>
			</view>
		</navigationBarVue>
		
		<view class="wrap paddingBottom"
			:style="'padding-top: calc(' + (topHeight + 10) + 'px) !important;'"
		>
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="goods-item">
						<view class="goods-info-bg flex align-center">
							<view class="choose" v-if="isManager" @click="onChooseGoods(index)">
								<image
									v-if="item.isChoose"
									class="img"
									:src="$staticImagePath('common/choose_selects.png')"
								/>
								
								<image
									v-else
									class="img"
									:src="$staticImagePath('common/choose_normal.png')"
								/>
							</view>
							
							<view class="goods-info flex align-center">
								<view class="file">
									<image
										class="file"
										:src="$wanlshop.oss(item.image)"
									/>
								</view>
								
								<view class="goods-right flex column just-between">
									<view class="goods-name-bg flex just-between">
										<view class="goods-name limit-num-line">
											{{ item.title }}
										</view>
										
										<view class="status">
											{{ item.status === 'hidden' ? (
												["审核中", "审核成功", "驳回"][item.audit]
											) : "已上架" }}
										</view>
									</view>
									
									
									<view class="goods-price-stock">
										<view class="goods-price-bg flex align-base">
											<view class="price">
												￥{{ item.price }}
											</view>
											
											<!-- <view class="mark-price">
												底价:￥{{ item.market_price }}
											</view> -->
										</view>
										
										<view class="stock">
											库存：{{ item.stock_num }}
										</view>
									</view>
								</view>
							</view>
						</view>
						
						<view class="refuse-reason flex align-center just-between" v-if="item.audit == 2">
							<view class="reason-a">
								驳回原因
							</view>
							
							<view class="reason-b">
								{{ item.why }}
							</view>
						</view>
						
						<view class="goods-bottom-bg flex align-center just-end" v-if="!isManager">
							<view class="btn one" @click="onDeleteGoods(item)">
								删除
							</view>
							
							<view class="btn one" @click="onStatusGoods(item)">
								{{ item.status === 'hidden' ? "上架" : "下架" }}
							</view>
							
							<view class="btn two" @click="onEditGoods(item)">
								编辑
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		
		<view class="wrap-footer safe-area"
			:class="isManager ? 'wrap-footer-bgColor' : ''"
			v-if="list.length > 0"
		>
			<view class="footer-btn-bg flex align-center" v-if="!isManager">
				<view class="btn one" @click.stop="onManager">
					批量管理
				</view>
				
				<view class="btn two" @click.stop="onAddGoods">
					新增产品
				</view>
			</view>
			
			<view class="footer-edit-bg flex align-center just-between" v-else>
				<view class="flex align-center" @click.stop="onAllChoose">
					<view class="choose">
						<image
							v-if="isAllChoose"
							class="img"
							:src="$staticImagePath('common/choose_selects.png')"
						/>
						
						<image
							v-else
							class="img"
							:src="$staticImagePath('common/choose_normal.png')"
						/>
					</view>
					
					<view class="tips">
						全选
					</view>
				</view>
				
				<view class="btn-bg flex align-center just-end">
					<view class="btn one" @click.stop="onManagerStatus">
						{{ status === "1" ? "下架" : "上架" }}
					</view>
					
					<view class="btn two" @click.stop="onManagerDelete">
						删除
					</view>
				</view>
				
				<image
					class="close"
					:src="$staticImagePath('goods/close.png')"
					@click.stop="onCloseManager"
				/>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ShopGoodsList,
		EditGoodsStatus,
		GoodsDelete,
	} from "@/utils/API.js";
	
	import navigationBarVue from "../components/navigationBar/navigationBar.vue";
	import wrapBgImgVue from "../components/navigationBar/bgImg.vue";
	
	export default {
		components: {
			navigationBarVue,
			wrapBgImgVue,
		},
		data() {
			return {
				topHeight: 0, //顶部高度
				tab_list: [
					{ title: "已上架", type: "1" },
					{ title: "仓库中", type: "2" },
				],
				status: "1",
				
				isManager: false, //是否管理
				isAllChoose: false, //是否是全选
				
				page: 1,
				total: 0,
				list: [],
			}
		},
		onShow() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
 		methods: {
			/**
			 * 顶部高度
			 */
			onTotalHeight(height) {
				this.topHeight = height;
			},
			/**
			 * tab切换
			 */
			onTab(item) {
				if (this.status === item.type) {
					return;
				}
				this.status = item.type;
				this.onRefresh();
			},
			/**
			 * 选择商品
			 */
			onChooseGoods(index) {
				this.list[index].isChoose = !this.list[index].isChoose;
				this.onCalculationAllChoose();
			},
			
			/**
			 * 删除
			 */
			onDeleteGoods(item) {
				uni.showModal({
					title: "提示",
					content: "确定要删除此商品?",
					success: res => {
						if (res.confirm) {
							this.onDeleteGoodsData(item.id);
						}
					}
				})
			},
			
			/**
			 * 上架/下架
			 */
			onStatusGoods(item) {
				var type = "";
				if (item.status === "hidden") {
					type = "1";
				} else {
					type = "2";
				}
				this.onStatusData(item.id, type);
			},
			
			/**
			 * 编辑
			 */
			onEditGoods(item) {
				this.$wanlshop.to(`/pages/new/addProduct/addProduct?id=${item.id}`);
			},
			
			
			/**
			 * 全选
			 */
			onAllChoose() {
				var allChoose = !this.isAllChoose;
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isChoose = allChoose;
				}
				this.isAllChoose = allChoose;
			},
			
			/**
			 * 判断是否全选
			 */
			onCalculationAllChoose() {
				const chooseList = this.onCalculationChooseList();
				if (chooseList.length === this.list.length) {
					this.isAllChoose = true;
				} else {
					this.isAllChoose = false;
				}
			},
			
			/**
			 * 批量管理
			 */
			onManager() {
				this.isManager = true;
			},
			/**
			 * 添加商品
			 */
			onAddGoods() {
				this.$wanlshop.to("/pages/new/addProduct/addProduct");
			},
			/**
			 * 关闭管理
			 */
			onCloseManager() {
				this.isManager = false;
			},
			/**
			 * 删除
			 */
			onManagerDelete() {
				const list = this.onCalculationChooseList();
				if (list.length === 0) {
					this.$st.show("请选择要删除的商品");
					return;
				}
				var idsList = [];
				list.forEach(item => {
					idsList.push(item.id);
				})
				uni.showModal({
					title: "提示",
					content: "确定要删除选中的商品?",
					success: res => {
						if (res.confirm) {
							this.onDeleteGoodsData(idsList.join(","));
						}
					}
				})
			},
			
			/**
			 * 上下架
			 */
			onManagerStatus() {
				const list = this.onCalculationChooseList();
				var title = "";
				var type = "";
				if (this.status === "1") {
					title = "请选择要下架的商品";
					type = "2";
				} else {
					title = "请选择要上架的商品";
					type = "1";
				}
				if (list.length === 0) {
					this.$st.show(title);
					return;
				}
				var idsList = [];
				list.forEach(item => {
					idsList.push(item.id);
				})
				
				this.onStatusData(idsList.join(","), type);
			},
			/**
			 * 确定上下架
			 */
			onStatusData(ids, type) {
				var success = "";
				if (type === "1") {
					success = "上架成功";
				} else {
					success = "下架成功";
				}
				this.$throttle(() => {
					EditGoodsStatus({
						type,
						ids
					}).then(res => {
						this.$st.success(success, () => {
							this.onRefresh();
						});
					})
				})
			},
			/**
			 * 删除商品
			 */
			onDeleteGoodsData(ids) {
				this.$throttle(() => {
					GoodsDelete(ids).then(res => {
						this.$st.success("删除成功", () => {
							this.onRefresh();
						})
					})
				})
			},
			/**
			 * 获取商品选中状态
			 */
			onCalculationChooseList() {
				var chooseList = [];
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].isChoose) {
						chooseList.push(this.list[i]);
					}
				}
				return chooseList
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				ShopGoodsList({
					page: this.page,
					status: this.status,
				}).then(res => {
					var list = res.data.data;
					list.forEach(item => {
						item["isChoose"] = false;
					})
					this.total = res.data.total;
					if (this.page == 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
					this.onCalculationAllChoose();
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap-status-bg {
		width: 100%;
		overflow: hidden;
		height: 100rpx;
		
		.status-item {
			flex: 1;
			overflow: hidden;
			font-size: 30rpx;
			color: #333333;
			position: relative;
		}
		.active {
			color: #84BD00 !important;
			font-weight: bold;
		}
		
		.tab-line {
			position: absolute;
			left: 50%;
			bottom: 10rpx;
			transform: translateX(-50%);
			width: 34rpx;
			height: 17rpx;
			overflow: hidden;
		}
	}
	
	.wrap {
		--bottom-height: 140rpx;
		padding: 30rpx;
		box-sizing: border-box;
		
		.wrap-list {
			width: 100%;
			overflow: hidden;
			
			.goods-item {
				width: 100%;
				background-color: white;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 36rpx 30rpx 30rpx;
				box-sizing: border-box;
				overflow: hidden;
				
				&:last-child {
					margin-bottom: 0rpx;
				}
				
				.goods-info-bg {
					width: 100%;
					overflow: hidden;
					
					.choose {
						width: 30rpx;
						height: 30rpx;
						margin-right: 30rpx;
						overflow: hidden;
						
						.img {
							width: 100%;
							height: 100%;
						}
					}
					
					.goods-info {
						flex: 1;
						overflow: hidden;
						gap: 20rpx;
						
						.file {
							width: 166rpx;
							height: 166rpx;
							overflow: hidden;
						}
						
						.goods-right {
							flex: 1;
							height: 166rpx;
							overflow: hidden;
							
							.goods-name-bg {
								width: 100%;
								overflow: hidden;
								gap: 20rpx;
								
								.goods-name {
									--limit-num: 2;
									flex: 1;
									overflow: hidden;
									color: #333333;
									font-size: 26rpx;
								}
								
								.status {
									color: #84BD00;
									font-size: 26rpx;
								}
							}
							
							.goods-price-stock {
								width: 100%;
								overflow: hidden;
								
								.goods-price-bg {
									width: 100%;
									gap: 15rpx;
									overflow: hidden;
									
									.price {
										color: #FF0000;
										font-size: 33rpx;
										font-weight: bold;
									}
									
									.mark-price {
										color: #999999;
										font-size: 30rpx;
									}
								}
								
								.stock {
									margin-top: 10rpx;
									color: #999999;
									font-size: 30rpx;
								}
							}
						}
					}
				}
				
				.refuse-reason {
					width: 100%;
					background-color: #F6F6F6;
					padding: 20rpx 30rpx;
					margin-top: 30rpx;
					overflow: hidden;
					gap: 20rpx;
					border-radius: 20rpx;
					
					.reason-a {
						color: #3D3D3D;
						font-size: 26rpx;
					}
					
					.reason-b {
						color: #999999;
						font-size: 26rpx;
					}
				}
			
				.goods-bottom-bg {
					margin-top: 30rpx;
					width: 100%;
					overflow: hidden;
					gap: 18rpx;
					
					.btn {
						width: 135rpx;
						height: 52rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 30rpx;
						overflow: hidden;
						font-size: 24rpx;
					}
					
					.one {
						color: #333333;
						border: 2rpx solid #DBDBDB;
					}
					
					.two {
						color: white;
						background: #84BD00;
					}
				}
			}
		}
	}
	
	.wrap-footer-bgColor {
		background-color: white !important;
	}
	
	.wrap-footer {
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 100%;
		z-index: 99;
		background-color: transparent;
		overflow: hidden;
		
		.footer-btn-bg {
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			overflow: hidden;
			gap: 50rpx;
			
			.btn {
				flex: 1;
				height: 82rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
				overflow: hidden;
				font-size: 30rpx;
			}
			
			.one {
				color: #84BD00;
				background-color: white;
				border: 2rpx solid #84BD00;
			}
			
			.two {
				color: white;
				background-color: #84BD00;
			}
		}
	
		.footer-edit-bg {
			width: 100%;
			background-color: white;
			height: 120rpx;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			
			.choose {
				width: 30rpx;
				height: 30rpx;
				
				.img {
					width: 100%;
					height: 100%;
				}
			}
			
			.tips {
				margin-left: 20rpx;
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}
			
			.btn-bg {
				flex: 1;
				overflow: hidden;
				margin-right: 30rpx;
				margin-left: 30rpx;
				gap: 25rpx;
				
				.btn {
					width: 150rpx;
					height: 65rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50rpx;
					overflow: hidden;
					font-size: 26rpx;
				}
				
				.one {
					color: #84BD00;
					border: 2rpx solid #84BD00;
				}
				
				.two {
					color: white;
					background-color: #84BD00;
				}
			}
			
			.close {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	
</style>